import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect, Link } from 'dva';
import {
  Table,
  Icon,
  Divider,
  Form,
  Select,
  DatePicker,
  Input,
  Card,
  Tag,
  Avatar,
  Checkbox,
  Rate,
  Progress,
  Button,
  Dropdown,
  Row,
  Col,
  Modal,
  Collapse,
  List,
  Radio,
} from 'antd';

import ThirdVerify from './ThirdVerify/ThirdVerify';
import styles from './CustomerList.less';
import ImageUploader from './Attachment/ImageUploader';
import ImageDisplayer from './Attachment/ImageDisplayer';

const Panel = Collapse.Panel;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
};

@connect(({ risk }) => ({
  risk,
}))
export default class CustomerList1 extends PureComponent {
  constructor(props) {
    super(props);
  }

  renderPanelContent = item => {
    const { documentList } = item;
    const { thridVerifyList } = item;
    const { customerFooter } = this.props;
    const { hideDocuments, hideThirdVerify } = this.props;

    return (
      <div>
        {!hideDocuments && (
          <List
            key="list1"
            grid={{ gutter: 16, column: 4 }}
            dataSource={documentList}
            renderItem={item => (
              <List.Item>
                <Card>
                  <div style={{ textAlign: 'center' }}>
                    <ImageDisplayer src={item.cover} />
                  </div>
                  <div style={{ textAlign: 'center' }}>{item.title}</div>
                </Card>
              </List.Item>
            )}
          />
        )}

        {!hideThirdVerify && (
          <List
            key="list2"
            grid={{ gutter: 16, column: 4 }}
            dataSource={thridVerifyList}
            renderItem={item => (
              <List.Item>
                <ThirdVerify item={item} />
              </List.Item>
            )}
          />
        )}
        {customerFooter}
      </div>
    );
  };

  renderPanelTitle = item => {
    return (
      <Row>
        <Col span={4}>
          <span
            style={{
              fontWeight: 'strong',
              fontSize: '16px',
              marginRight: '10px',
            }}
          >
            {item.role.name}
          </span>
        </Col>
        <Col span={3}>
          <Tag color="blue">{item.name}</Tag>
        </Col>
        <Col
          span={6}
          style={{
            fontSize: '12px',
            color: '#999999',
          }}
        >
          身份证号: {item.idcard}
        </Col>
        <Col
          span={6}
          style={{
            fontSize: '12px',
            color: '#999999',
          }}
        >
          联系电话: {item.mobile}
        </Col>
        {item.relation.key != 'self' && (
          <Col
            span={2}
            style={{
              fontSize: '12px',
              color: '#999999',
            }}
          >
            {' '}
            {item.relation.name}
          </Col>
        )}
      </Row>
    );
  };

  render() {
    const { risk } = this.props;
    const { customers } = risk;
    const activeKey = customers.length > 0 ? customers[0].key : null;

    return (
      <div>
        <Collapse bordered={true} defaultActiveKey={activeKey}>
          {customers.map(item => {
            return (
              <Panel key={item.key} header={this.renderPanelTitle(item)} key={item.key}>
                {this.renderPanelContent(item)}
              </Panel>
            );
          })}
        </Collapse>
      </div>
    );
  }
}
